<template>
  <div class="app-container">
    <el-radio-group v-model="queryParams.status" @change="getList">
      <el-radio :label="0">全部</el-radio>
      <el-radio :label="1">自有产品</el-radio>
      <el-radio :label="2">云产品库</el-radio>
    </el-radio-group>
    <!-- *************************************搜索区************************************* -->
    <el-form
      style="margin-top: 15px"
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
    >
      <!-- 分类 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
          placeholder="分类"
        >
          <el-option v-for="item in 10" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 属性 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
          placeholder="属性"
        >
          <el-option v-for="item in 10" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 品牌 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
          placeholder="品牌"
        >
          <el-option v-for="item in 10" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 状态 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
          placeholder="状态"
        >
          <el-option v-for="item in 10" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 产品标签 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
          placeholder="产品标签"
        >
          <el-option v-for="item in 10" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 时间选择 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
        >
          <el-option label="创建时间" value="item"> </el-option>
        </el-select>
        <el-date-picker
          style="top: 1px; border-radius: 0; border-left: none"
          size="mini"
          type="daterange"
          v-model="queryParams.value1"
          range-separator="➡️"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <!-- 搜索内容 -->
      <el-form-item>
        <el-input
          style="top: 3px"
          size="mini"
          placeholder="请输入内容"
          v-model="queryParams.input3"
          class="input-with-select"
        >
          <el-select
            style="width: 80px"
            v-model="queryParams.value2"
            slot="prepend"
            :placeholder="$t('请选择')"
          >
            <el-option label="SKU" :value="1"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- *************************************搜索区end************************************* -->
    <!--
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['system:menu:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->

    <el-table v-loading="loading"   ref="TableRef"  :data="tableData" row-key="menuId">
      <!-- sku -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="sku"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 图片 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        :label="$t('图片')"
        align="center"
        width="100"
      >
        <!-- <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon" />
        </template> -->
      </el-table-column>
      <!-- 中文名 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        :label="$t('中文名')"
        width="60"
      />
      <!-- 日文名 -->
      <el-table-column show-overflow-tooltip prop="nickName" :label="$t('日文名')" />
      <!-- 库存/云库存 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="库存/云库存"
      />
      <!-- 库位号 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        :label="$t('库位号')"
        width="80"
      />
      <!-- 当前价格 -->
      <el-table-column
        show-overflow-tooltip
        label="当前价格"
        align="center"
        prop="nickName"
      />
      <!-- 所属者 -->
      <el-table-column
        show-overflow-tooltip
        label="所属者"
        align="center"
        prop="nickName"
      />
      <!-- 云开关 -->
      <el-table-column
        show-overflow-tooltip
        label="云开关"
        align="center"
        prop="nickName"
      />
      <!-- 类型 -->
      <el-table-column
        show-overflow-tooltip
        :label="$t('类型')"
        align="center"
        prop="nickName"
      />
      <!-- 规格 -->
      <el-table-column
        show-overflow-tooltip
        label="规格"
        align="center"
        prop="nickName"
      />
      <!-- 备注 -->
      <el-table-column
        show-overflow-tooltip
        :label="$t('备注')"
        align="center"
        prop="nickName"
      />
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listUser } from "@/api/system/user";

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: "productList",
  data() {
    return {
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        /**筛选  默认全部 */
        status: 0,
        value2: 1,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询菜单列表 */
    getList() {
      this.loading = true;
      listUser(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.pageTotal = res.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null;
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null;
      });
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.queryParams.status = 0;

      this.getList();
    },

    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
  },
};
</script>
